<template>
  <div class="no-padding app-container">
    <lst-page-container>
      <template slot="query">
        <el-form :model="tableQueryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="整改状态" prop="repairState">
            <el-select v-model="tableQueryParams.repairState">
              <el-option
                  v-for="dict in dict.type.enum_question_repair"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="table">
        <el-table @sort-change="handleSortChange" height="100%" v-loading="loading" :data="dataList">
          <el-table-column :sortable="colum.sortable" v-for="(colum,index) in questionTableColum" :key="index"
                           :width="colum.width"
                           :label="colum.label"
                           :align="colum.align" :prop="colum.propValue">
            <template slot-scope="scope">
              <question-table-colum :scope="scope" :colum-config="colum"></question-table-colum>
            </template>
          </el-table-column>
          <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="showInfo(scope.row)"
              >详情
              </el-button>
              <!--              <el-button-->
              <!--                  v-if="scope.row.allowRepair  == 1"-->
              <!--                  size="mini"-->
              <!--                  type="text"-->
              <!--                  icon="el-icon-edit"-->
              <!--                  @click="handleUpdate(scope.row)"-->
              <!--              >整改-->
              <!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="tableQueryParams.pageNum"
            :limit.sync="tableQueryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </lst-page-container>

    <el-drawer
        class="diy-draw"
        title="整改隐患"
        :wrapperClosable="false"
        size="45%"
        :visible.sync="open">
      <drawer-content>
        <!--使用整改隐患组件-->
        <template slot="body">
          <el-form v-if="open" :rules="rules" :model="form" ref="rectifyAndReform" size="small"
                   label-width="80px">
            <el-form-item class="column-item" label="整改进度" prop="schedule">
              <el-slider
                  :step="10"
                  :marks="marks"
                  v-model="form.schedule">
              </el-slider>
            </el-form-item>
            <el-form-item class="column-item" label="整改完成情况" prop="situation">
              <el-input
                  v-model="form.situation"
                  placeholder="请输入整改过程记录描述"
                  type="textarea"
                  clearable
                  :rows="10"
              >
              </el-input>
            </el-form-item>
            <el-form-item class="column-item" label="整改记录">
              <value-table :hand-width="'250px'" :add-title="'添加日志'" :update-title="'修改日志'" :dialog-form-label-width="`80px`" :dialog-width="`700px`"
                           :value-config="questionValueTableConfig" v-model="form.items"></value-table>
            </el-form-item>
          </el-form>
          <!--                              <CleanPitfall @change="reloadInfoData" v-if="open" :rec-data="form"-->
          <!--                                            :inspect-info="inspectInfo"></CleanPitfall>-->
        </template>
        <template slot="footer">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitForRectification">确定</el-button>
        </template>
      </drawer-content>
    </el-drawer>


    <el-drawer
        class="diy-draw"
        title="隐患详情"
        :wrapperClosable="false"
        :size="HIDDEN_DANGER_WIDTH"
        :destroy-on-close="true"
        :visible.sync="infoOpen">
      <drawer-content>
        <template slot="body">
          <hidden-danger-info ref="danInfo" :info-data="infoData" :inspect-info="inspectInfo"></hidden-danger-info>
        </template>
        <template slot="footer" v-if="infoData.allowRepair  == 1">
          <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="rectifyAndReform(infoData)"
          >整改
          </el-button>
        </template>
      </drawer-content>
    </el-drawer>
  </div>
</template>

<script>
import {listPageMixins} from "@/mixins/listPageMixins";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {isArr} from "@/utils/arrayUtil";
import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";
import ChooseQuestion from "@/views/components/ChooseQuestion/index.vue";
import {repairGetQuestionDetail, repairQueryQuestion, repairQuestion} from "@/api/checkPage/repair";
import {HIDDEN_DANGER_WIDTH} from "@/constantData";
import HiddenDangerInfo from "@/views/checkBusPage/components/hiddenDangerInfo/index.vue";
//引入整改隐患组件
import CleanPitfall from "@/views/checkBusPage/components/cleanPitfall/index.vue";
import ValueTable from "@/components/ValueTable/index.vue";

export default {
  mixins: [listPageMixins, subPageMixin],
  components: {
    ShowFileList,
    ChooseQuestion,
    HiddenDangerInfo,
    CleanPitfall,   //注册隐患整改组件
    ValueTable
  },
  dicts: ['enum_question_repair'],
  data() {
    return {
      HIDDEN_DANGER_WIDTH,
      modelName: '自查隐患',
      fileFiled: 'repairFileVos',
      // 查询参数
      queryParams: {
        // 整改状态
        repairState: null,
        // 隐患类别
        questionTypeCode: null,
      },
      otherQueryParam: {
        inspectId: this.inspectInfo.id
      },
      getListFun: repairQueryQuestion,
      updateFun: repairQuestion,
      getInfoFun: repairGetQuestionDetail,
      marks:{
      },
      questionValueTableConfig: [
        {
          label: '整改内容',
          value: 'situation',
          type: 'txtArea',
        },
        {
          label: '整改时间',
          value: 'repairTime',
          type: 'time',
        },
        {
          label: '整改后附件',
          value: 'repairFileIds',
          type: 'file',
        },
      ],
      baseForm: {
        id: null,
        //  整改完成情况
        situation: null,
        //  整改进度
        schedule: 0,
        //  整改记录
        items: []
      },
      rules: {
        situation: [
          {required: true, message: "整改情况不能为空", trigger: "blur"}
        ],
      },
    }
  },
  methods: {
    rectifyAndReform(row) {
      let owner = this
      this.getInfoData(row.id).then(res => {
        let {schedule,situation} = res
        owner.baseForm.id = row.id
        owner.baseForm.schedule = schedule
        owner.baseForm.situation = situation
        owner.reset();
        owner.open = true;
      });
    },
    submitForRectification() {
      let owner = this
      this.$refs["rectifyAndReform"].validate(valid => {
        if (valid) {
          owner.startLoading('正在加载....')
          repairQuestion(owner.form).then(res => {
            owner.$modal.msgSuccess('操作成功')
          }).finally(() => {
            owner.open = false
            owner.reloadInfoData()
            owner.endLoading()
          });
        }
      })
    }
  },
  created(){
    let owner = this;
    for (let i = 0; i <= 100; i += 10) {
      owner.marks[i] = `${i}`
    }
  }
}
</script>

<style scoped>

</style>
